<template>
  <el-container>
    <!-- 头部区域 -->
    <el-header
        style="text-align: right; font-size: 12px; border-bottom: 1px solid #bebebe;"
    >
      <common-header></common-header>
    </el-header>

    <el-container style="overflow: hidden;">
      <!-- 侧边栏区域 -->
      <div :class="['sidebar', { 'expanded': !isCollapse }]" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
        <el-menu
            default-active="1-4-1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
        >
          <el-menu-item v-for="item in menuItems"
                        :key="item.name"
                        :class="['elAsideDiv', { active: selectedItem === item.path }]"
                        :style="{ color: '#001F3F' }"
                        @click="handleClick(item.path)">
            <i :class="item.icon" :style="{ color: '#001F3F' }"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 主容器，包含列表区域 -->
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import CommonHeader from "../components/CommonHeader.vue";

export default {
  data() {
    return {
      menuItems: [
        {
          path: "adminPage",
          name: "用户管理",
          icon: 'el-icon-user'
        },
        {
          path: "adminForum",
          name: "帖子管理",
          icon: 'el-icon-s-platform'
        },
        {
          path: "adminBulletin",
          name: "公告管理",
          icon: 'el-icon-tickets'
        },
        {
          path: "adminDepartment",
          name: "部门管理",
          icon: 'el-icon-s-home'
        },

      ],
      selectedItem: "",
      isCollapse: true // 默认为收起状态
    };
  },
  created() {
    // 在sessionStorage中存储token
    sessionStorage.setItem(this.$store.state.myName+"XAccessToken", 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOjEsImV4cCI6MTcyNjI1ODg3OSwicGxhdGZvcm0iOjIsInVzZXJuYW1lIjoiMTUwNzMxNzEzMjAifQ.hsW2zoK0NOVqAeoHrV-mORCVdp3gBRlsH1mcIILe7V8');
    sessionStorage.setItem(this.$store.state.myName+"SysAccessToken", 'm7mSzYLFvbbFDU+d4fXFwg==');

    this.selectedItem = this.$route.path.split("/admin/")[1] || "adminPage";
    this.$watch("$route", (to,from) => {
      this.selectedItem = to.path.split("/admin/")[1] || "adminPage";
    });
  },
  mounted() {
    // 检查websocket是否存在
    if (this.$store.state.websocket) {
      // 保存原始监听器
      const originalOnMessage = this.$store.state.websocket.onmessage;

      // 设置全局监听逻辑
      this.$store.state.websocket.onmessage = (event) => {
        if (originalOnMessage) originalOnMessage(event);

        try {
          const message = JSON.parse(event.data);
          // 管理员页面的消息处理逻辑
          console.log('管理员页面收到WebSocket消息:', message);
        } catch (error) {
          console.error('解析WebSocket消息出错:', error);
        }
      };

      // 保存当前监听器引用
      this.currentOnMessage = this.$store.state.websocket.onmessage;
    } else {
      console.warn('WebSocket连接尚未建立，无法设置消息监听器');
    }
  },
  destroyed() {
    // 清除WebSocket监听器
    if (this.$store.state.websocket && this.currentOnMessage) {
      // 恢复原始监听器或移除当前监听器
      this.$store.state.websocket.onmessage = null;
      console.log('已清除管理员页面WebSocket消息监听器');
    }
  },
  methods: {
    handleClick(path) {
      const fullPath = `/admin/${path}`;

      if (this.$route.path != fullPath && !(fullPath === "/")) {
        this.$router.push(fullPath);
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleMouseEnter() {
      this.isCollapse = false; // 鼠标移入时展开
    },
    handleMouseLeave() {
      this.isCollapse = true; // 鼠标移出时收起
    }
  },
  components: {
    CommonHeader,
  },
};
</script>

<style lang="scss" scoped>
.sidebar {
  position: fixed;
  top: 60px; /* 头部高度 */
  bottom: 0;
  left: 0;
  width: 64px; /* 收缩状态下的宽度 */
  transition: width 0.3s ease;
  z-index: 1000; /* 确保覆盖在页面内容之上 */
}

.sidebar.expanded {
  width: 200px; /* 展开状态下的宽度 */
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: calc(100vh - 60px); /* 减去头部的高度 */
}

.el-menu-vertical-demo {
  border-right: none; /* 移除默认的右边框 */
}

/* 确保主容器有适当的左侧填充 */
.el-container > .el-container {
  padding-left: 64px; /* 根据收缩状态下的宽度调整 */
}

/* 当菜单展开时，保持主内容区位置不变 */
.el-container > .el-container .el-main {
  margin-left: 0;
}

/* 头部区域 */
.el-header {
  color: #333;
  line-height: 60px;
}

</style>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
</style>
